<template>
  <div>
    <div>
      <Banner :listImg="listImg"></Banner>
    </div>
    <div class="text">
      <div>HelloWorld</div>
      <div>124324</div>
    </div>

    <div>
      <tab :line-width="1" :active-color="'#ff4470'">
        <!-- 可修改vux tab 当window.innerWidth>640时，指定为640 -->
        <tab-item @on-item-click="tabClick" v-for="n in 8" :key="n" :selected="n===1">已发货{{ n }}</tab-item>
      </tab>
    </div>
    <div class="btn" @click="toast">showToast</div>
    <toast v-model="showToast" type="text" :text="text"></toast>
    <div class="btn" @click="getDeviceInfo">获取设备信息</div>
    <div class="info">
      手机设备信息：
      <div v-for="item in deviceInfo.split('\n')">{{item}}</div>
    </div>
  </div>
</template>

<script>
import { Tab, TabItem, Toast } from "vux";
import Banner from "./Banner";
export default {
  name: "HelloWorld",
  data() {
    return {
      listImg: [
        {
          url:
            "https://m.360buyimg.com/babel/s1440x576_jfs/t20746/255/2649558254/100621/37ad7090/5b600468Nbeaf7622.jpg!q70.dpg"
        },
        {
          url:
            "https://m.360buyimg.com/babel/s1440x576_jfs/t24328/232/1573362729/101126/2c20f151/5b627eb5Na455b3da.jpg!q70.dpg"
        },
        {
          url:
            "https://m.360buyimg.com/babel/s1440x576_jfs/t22603/69/1581067952/52565/197ab259/5b63ecdeNd31271eb.jpg!q70.dpg"
        },
        {
          url:
            "https://m.360buyimg.com/babel/s1440x576_jfs/t24328/232/1573362729/101126/2c20f151/5b627eb5Na455b3da.jpg!q70.dpg"
        }
      ],
      showToast: false,
      text: "text11111111111",
      ws: null,
      deviceInfo: ""
    };
  },
  components: {
    Banner,
    Tab,
    TabItem,
    Toast
  },
  mounted() {
    this.$store.commit("initWechat", {
      nick: "test",
      avatar: "avatar",
      openId: "sfds",
      picHost: "https://"
    });
  },
  created() {
    this.$plusReady(this.plusReady);
  },
  methods: {
    tabClick(i) {
      console.log(i);
    },
    toast() {
      this.showToast = true;
    },
    plusReady() {
      this.ws = plus.webview.currentWebview();
    },
    getDeviceInfo() {
      var str = "",
        i;
      str += "设备型号：" + plus.device.model + "\n";
      str += "设备厂商：" + plus.device.vendor + "\n";
      str += "IMEI：" + plus.device.imei + "\n";
      str += "UUID: " + plus.device.uuid + "\n";
      str += "IMSI：";
      for (i = 0; i < plus.device.imsi.length; i++) {
        str += plus.device.imsi[i];
      }
      str += "\n";
      str +=
        "屏幕分辨率：" +
        plus.screen.resolutionWidth * plus.screen.scale +
        " x " +
        plus.screen.resolutionHeight * plus.screen.scale +
        "\n";
      str += "DPI：" + plus.screen.dpiX + " x " + plus.screen.dpiY;
      this.deviceInfo = str;
    }
  }
};
</script>

<style lang="less" scoped>
.btn {
  margin: 1rem;
  color: #fff;
  background-color: #ff4470;
  padding: 0.3rem;
  border-radius: 3rem;
  text-align: center;
}
.text {
  margin: 0.6rem;
  color: #ff4470;
  text-align: center;
}
.info {
  margin: 0.5rem;
  background-color: gray;
  color: #fff;
  padding: 0.3rem;
}
</style>

